import { Link } from '@tanstack/react-router';
import { Button } from '../components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import Layout from '../components/Layout';
import { useCurrentUser, useTheme } from '../store/useStore';

export default function HomePage() {
  const currentUser = useCurrentUser();
  const theme = useTheme();

  const features = [
    {
      title: 'TanStack Query',
      description: 'Powerful data fetching with caching, background updates, and optimistic updates',
      icon: '🔄',
    },
    {
      title: 'TanStack Router',
      description: 'Type-safe routing with automatic code splitting and prefetching',
      icon: '🛣️',
    },
    {
      title: 'Zustand Store',
      description: 'Lightweight state management with TypeScript support and persistence',
      icon: '🏪',
    },
    {
      title: 'React Hook Form',
      description: 'Performant forms with easy validation and minimal re-renders',
      icon: '📝',
    },
    {
      title: 'Radix UI + Tailwind',
      description: 'Accessible components with beautiful styling and dark mode support',
      icon: '🎨',
    },
    {
      title: 'TypeScript',
      description: 'End-to-end type safety for better developer experience',
      icon: '🛡️',
    },
  ];

  return (
    <Layout>
      <div className="space-y-8">
        {/* Hero Section */}
        <div className="text-center space-y-4">
          <h1 className="text-4xl font-bold tracking-tight">
            Welcome to Modern React 2025
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            A complete TypeScript template with all the modern tools you need for building 
            scalable React applications.
          </p>
          {currentUser && (
            <div className="flex items-center justify-center gap-2">
              <span>Welcome back,</span>
              <Badge variant="outline">{currentUser.name}</Badge>
            </div>
          )}
        </div>

        {/* Quick Actions */}
        <div className="flex flex-wrap justify-center gap-4">
          <Button asChild>
            <Link to="/users">Browse Users</Link>
          </Button>
          <Button asChild variant="outline">
            <Link to="/posts">View Posts</Link>
          </Button>
          <Button asChild variant="secondary">
            <Link to="/posts/create">Create Post</Link>
          </Button>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature) => (
            <Card key={feature.title} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex items-center space-x-2">
                  <span className="text-2xl">{feature.icon}</span>
                  <CardTitle className="text-lg">{feature.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  {feature.description}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-3xl font-bold text-primary">100%</CardTitle>
              <p className="text-sm text-muted-foreground">TypeScript Coverage</p>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-3xl font-bold text-primary">2025</CardTitle>
              <p className="text-sm text-muted-foreground">Modern Stack</p>
            </CardHeader>
          </Card>
          <Card>
            <CardHeader className="text-center">
              <CardTitle className="text-3xl font-bold text-primary">{theme === 'dark' ? '🌙' : '☀️'}</CardTitle>
              <p className="text-sm text-muted-foreground">Theme: {theme}</p>
            </CardHeader>
          </Card>
        </div>
      </div>
    </Layout>
  );
} 